<template>
	<view class="member">
		<view class="header">
			<view class="setting" @tap="go('/pages/house_property/set/index/index')"><image src="../../../static/member/setting.png"></image></view>
			<view class="userInfo">
				<view class="info">
					<image class="avatar" :src="userinfo.avatar || '../../../static/member/avatar.png'"></image>
					<view class="promptText" @tap="go('/pages/login/login')" v-if="!login">
						<view class="login">马上登录</view>
						<view class="text">登录后享受更多服务</view>
					</view>
					<view class="promptText" v-if="login">
						<view class="login">{{ userinfo.nickname }}</view>
						<view class="text">{{ userinfo.phone }}</view>
					</view>
				</view>
				<image class="headerArrow" src="../../../static/member/arrow_white.png"></image>
			</view>
			<view class="wallet">
				<view class="walletTitle">
					<view class="walletName">我的钱包</view>
					<image class="headerArrow" src="../../../static/member/arrow_white.png"></image>
				</view>
				<view class="walletFigure">
					<view class="figureItem">
						<view class="num">{{ userinfo.account || 0 }}</view>
						<view class="itemName">零钱</view>
					</view>
					<view class="figureItem">
						<view class="num">{{ userinfo.gold || 0 }}</view>
						<view class="itemName">金币</view>
					</view>
				</view>
			</view>
			<view class="account">
				<view class="accountName">我的账单</view>
				<image class="arrowRed" src="../../../static/member/arrow_red.png"></image>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in options" :key="index" @tap="go(item.url)">
				<view class="option">
					<image class="labelImg" :src="item.image"></image>
					<view class="label">{{ item.name }}</view>
				</view>
				<image class="arrow" src="/static/member/arrow.png"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="main">
				<view class="title">主要功能</view>
				<view class="function">
					<view class="functionItem" v-for="(item, index) in menuList" :key="item.name" v-if="index < 3" @tap="go(item.url)">
						<image :src="item.image" class="functionImg"></image>
						<view class="functionName">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="title">测试功能</view>
				<view class="function">
					<view class="functionItem" v-for="item in menuList" :key="item.name">
						<image :src="item.image" class="functionImg"></image>
						<view class="functionName">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			login: false,
			userinfo: {},
			// 顶部的列表
			options: [
				{
					name: '购物车',
					image: '/static/member/icon_car.png',
					url:'/pages/house_property/car/car'
				},
				{
					name: '我的关注',
					image: '/static/member/icon_focus.png'
				},
				{
					name: '我的收藏',
					image: '/static/member/icon_collect.png',
					url:'/pages/house_property/collection/collection'
				},
				{
					name: '我的发布',
					image: '/static/member/icon_apply.png'
				},
				{
					name: '我的旅拍',
					image: '/static/member/icon_travel.png'
				},
				{
					name: '我的族谱',
					image: '/static/member/icon_menu.png'
				},
				{
					name: '我的档案',
					image: '/static/member/icon_figure.png'
				},
				{
					name: '会员免费项目',
					image: '/static/member/icon_vip.png'
				}
			],
			// 底部功能
			menuList: [
				{
					name: '地产',
					image: '/static/index/icon_hourse.png',
					url: '/pages/house_property/myShop/myShop'
				},
				{
					name: '商城',
					image: '/static/index/icon_store.png'
				},
				{
					name: '新闻',
					image: '/static/index/icon_news.png',
					url: '/pages/news/index'
				},
				{
					name: '工程',
					image: '/static/index/icon_project.png'
				},
				{
					name: '投资',
					image: '/static/index/icon_figure.png'
				},
				{
					name: '教育',
					image: '/static/index/icon_teach.png'
				},
				{
					name: '医疗',
					image: '/static/index/icon_hospital.png'
				},
				{
					name: '酒店',
					image: '/static/index/icon_shop.png'
				}
			]
		};
	},
	onShow() {
		this.getData();
	},
	methods: {
		go(url) {
			uni.navigateTo({
				url: url
			});
		},
		async getData() {
			let authData = uni.getStorageSync('authData');
			if (authData) {
				let res = await this.$request.post('/setting/info');
				if (res.data.code == 10000) {
					this.userinfo = res.data.data.list;
					this.login = true;
				} else {
					this.login = false;
				}
			}
		}
	}
};
</script>

<style>
.member {
	background: #f3f3f3;
}

.header {
	padding-top: 62rpx;
	height: 542rpx;
	background: url('https://tws.oss.cnweisou.com/images/0/2019/09/Ly5C4lyL445HL445BlJc9L9ZBLjZzB.png') no-repeat;
	background-size: 100% 100%;
}

.setting {
	padding-right: 24rpx;
	width: 100%;
	text-align: right;
	box-sizing: border-box;
}

.setting image {
	width: 42rpx;
	height: 42rpx;
}

.userInfo {
	display: flex;
	padding-left: 30rpx;
	padding-right: 14rpx;
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
}

.info {
	display: flex;
	width: 100%;
	color: #fff;
	align-items: center;
}

.avatar {
	margin-right: 20rpx;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.login {
	font-size: 30rpx;
}

.text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.5);
}

.headerArrow {
	width: 42rpx;
	height: 42rpx;
}

/* 我的钱包 */
.wallet {
	margin-top: 60rpx;
	padding: 0 92rpx;
	width: 100%;
	box-sizing: border-box;
}

.walletTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	color: #fff;
}

.walletFigure {
	display: flex;
	margin-top: 68rpx;
	width: 100%;
}

.figureItem {
	display: flex;
	width: 50%;
	color: #fff;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.num {
	font-size: 40rpx;
}

.itemName {
	margin-top: 18rpx;
	font-size: 24rpx;
}

.account {
	display: flex;
	margin-top: 16rpx;
	width: 100%;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #f34c32;
}

.arrowRed {
	width: 36rpx;
	height: 36rpx;
}

.list {
	margin-bottom: 20rpx;
	padding: 0 24rpx;
	width: 100%;
	font-size: 30rpx;
	background: #fff;
	box-sizing: border-box;
}

.item {
	display: flex;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e7e7e7;
}

.item:last-child {
	margin: 0;
	border: none;
}

.option {
	display: flex;
	align-items: center;
}

.labelImg {
	margin-right: 10rpx;
	width: 50rpx;
	height: 50rpx;
}

.arrow {
	width: 32rpx;
	height: 32rpx;
}

.bottom {
	padding: 20rpx 24rpx 0;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
}

.main {
	margin-bottom: 50rpx;
}

.title {
	margin-bottom: 30rpx;
	padding-left: 12rpx;
	font-size: 28rpx;
	border-left: 3px solid #f34b32;
}

.function {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

.functionItem {
	margin-bottom: 30rpx;
	width: calc(100% / 4);
	text-align: center;
}

.functionItem:nth-child(n + 5) {
	margin: 0;
}

.functionImg {
	margin-bottom: 10rpx;
	width: 90rpx;
	height: 90rpx;
}

.functionName {
	font-size: 26rpx;
}
</style>
